<template>
  <div class="vioce-page">
    <div class="head">
      <span class="head-out"></span>
      <span class="head-title">平台</span>
      <span class="head-out">
        <el-icon class="head-icon" @click="handleGoBack()"
          ><switch-button
        /></el-icon>
      </span>
    </div>
    <div class="main">
      <div class="left">
        <ComShell class="left-1" title="xxxx标题">
          <ComLeft1
            :chart-data="leftChartData1"
            width="100%"
            height="100%"
          ></ComLeft1>
        </ComShell>
        <ComShell class="left-2" title="xxxx标题">
          <ComLeft2
            :chart-data="leftChartData2"
            width="100%"
            height="100%"
          ></ComLeft2>
        </ComShell>
        <ComShell class="left-3" title="xxxx标题">
          <ComLeft3
            :chart-data="leftChartData1"
            width="100%"
            height="100%"
          ></ComLeft3>
        </ComShell>
      </div>
      <div class="middle">
        <div class="middle-1">
          <ComNumberBox>
            <ComNumberShow></ComNumberShow>
          </ComNumberBox>
          <ComNumberBox>
            <ComNumberShow></ComNumberShow>
          </ComNumberBox>
          <ComNumberBox>
            <ComNumberShow></ComNumberShow>
          </ComNumberBox>
        </div>
        <div class="middle-2">
          <ComMiddle2
            :chart-data="ComMiddle1"
            width="100%"
            height="100%"
          ></ComMiddle2>
        </div>

        <ComShell class="middle-3" title="xxxx标题">
          <ComMiddle3
            :chart-data="ComMiddle1"
            width="100%"
            height="100%"
          ></ComMiddle3>
        </ComShell>
      </div>
      <div class="right">
        <ComShell class="right-1" title="xxxx标题">
          <ComRight1
            :chart-data="leftChartData1"
            width="100%"
            height="100%"
          ></ComRight1>
        </ComShell>
        <ComShell class="right-2" title="xxxx标题">
          <ComRight2
            :chart-data="rightChartData2"
            width="100%"
            height="100%"
          ></ComRight2>
        </ComShell>
        <ComShell class="right-3" title="xxxx标题">
          <ComRight3
            :chart-data="leftChartData1"
            width="100%"
            height="100%"
          ></ComRight3>
        </ComShell>
      </div>
    </div>
  </div>
</template>

<script setup>
import { constantRoutes } from "@/router";
import {
  ComLeft1,
  ComLeft2,
  ComLeft3,
  ComMiddle1,
  ComMiddle2,
  ComMiddle3,
  ComRight1,
  ComRight2,
  ComRight3,
  ComShell,
  ComNumberBox,
  ComNumberShow,
} from "./components";

const router = useRouter();

const data = reactive({
  leftChartData1: {
    title: ["222"],
    expectedData: [120, 200, 150, 80, 70, 110, 130],
    actualData: [120, 200, 150, 80, 70, 110, 130],
  },
  leftChartData2: {
    title: ["222"],
    expectedData: [120, 200, 150, 80, 70, 110, 130, 80, 70],
  },
  rightChartData2: {
    title: ["222"],
    expectedData: [120, 200, 150, 80, 70, 110, 130, 80, 70],
  },
});

/** 返回上一页面 */
function handleGoBack() {
  router.go(-1);
}

const { leftChartData1, leftChartData2, rightChartData2 } = toRefs(data);
</script>

<style lang="scss" scoped>
.vioce-page {
  width: 1920px;
  height: 1080px;
  background-color: #003669;
  .head {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .head-title {
      font-size: 30px;
      color: #fff;
    }
    .head-out {
      width: 200px;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      padding-right: 20px;
    }
    .head-icon {
      color: #fff;
      font-size: 22px;
      cursor: pointer;
    }
  }
  .main {
    display: flex;
    flex-direction: row;
    padding-left: 20px;
    padding-right: 20px;
    .left {
      .left-1 {
        width: 416px;
        height: 260px;
      }
      .left-2 {
        width: 416px;
        height: 320px;
        margin-top: 20px;
      }
      .left-3 {
        width: 416px;
        height: 380px;
        margin-top: 20px;
      }
    }
    .middle {
      background-color: #003669;
      padding-left: 20px;
      padding-right: 20px;
      .middle-1 {
        margin-top: 27px;
        width: 1008px;
        height: 86px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }
      .middle-2 {
        width: 1008px;
        height: 570px;
      }
      .middle-3 {
        width: 1008px;
        height: 316px;
      }
    }
    .right {
      .right-1 {
        width: 416px;
        height: 260px;
      }
      .right-2 {
        margin-top: 20px;
        width: 416px;
        height: 320px;
      }
      .right-3 {
        margin-top: 20px;
        width: 416px;
        height: 380px;
      }
    }
  }
  /* 公共样式 */
}
</style>
